<template>
  <div class="btnSwitchContainer">
    <label
      name="btnSwitchRadio"
      v-for="(option, index) in options"
      :key="index"
    >
      <input
        type="radio"
        name="radio"
        :value="option.value"
        v-model="selectedValue"
        @click="option.func"
      />
      <span>{{ option.text }}</span>
    </label>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import { msgbox } from "@/utils/msgboxutils";

const selectedValue = ref("a");
defineExpose({
  selectedValue,
});

const options = [
  {
    value: "a",
    text: i18nt.value.searchView.btn1,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn1}” page`);
    },
  },
  {
    value: "b",
    text: i18nt.value.searchView.btn2,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn2}” page`);
    },
  },
  {
    value: "c",
    text: i18nt.value.searchView.btn3,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn3}” page`);
    },
  },
  {
    value: "d",
    text: i18nt.value.searchView.btn4,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn4}” page`);
    },
  },
  {
    value: "e",
    text: i18nt.value.searchView.btn5,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn5}” page`);
    },
  },
  {
    value: "f",
    text: i18nt.value.searchView.btn6,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn6}” page`);
    },
  },
  {
    value: "g",
    text: i18nt.value.searchView.btn7,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn7}” page`);
    },
  },
  {
    value: "h",
    text: i18nt.value.searchView.btn8,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn8}” page`);
    },
  },
  {
    value: "i",
    text: i18nt.value.searchView.btn9,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn9}” page`);
    },
  },
  {
    value: "j",
    text: i18nt.value.searchView.btn10,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn10}” page`);
    },
  },
  {
    value: "k",
    text: i18nt.value.searchView.btn11,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn11}” page`);
    },
  },
  {
    value: "l",
    text: i18nt.value.searchView.btn12,
    func: () => {
      msgbox.success(`切换到 “${i18nt.value.searchView.btn12}” page`);
    },
  },
];
</script>

<style scoped lang="scss">
.btnSwitchContainer {
  @include rel_cen_hw(50px, 100%);
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
  label {
    height: 50px;
    width: 122px;

    input[type="radio"] {
      clip: rect(0 0 0 0);
      clip-path: inset(100%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    span {
      //   display: block;
      //   position: relative;
      //   height: 100%;
      //   text-align: center;
      cursor: pointer;
      @include rel_cen_hw(100%, 100%);
      font-size: 22px;
      color: #0158b1;
      border-radius: 6px 6px 0 0;
      transition: background-color 0.5s ease, color 0.5s ease;
    }

    input[type="radio"]:checked + span {
      box-shadow: 0 0 0 0.0625em #035db9;
      background-color: #035db9;
      z-index: 1;
      color: #ffffff;
    }
  }
}
</style>
